import React, { useEffect, useState } from "react";
import { Space, Table, Tag, Button, Modal, Form, Input, message } from "antd";
import axios from "../../request/axios";
function List() {
  const [data, setData] = useState([]); //获取列表数据
  const [totalpage, setTotalpage] = useState(0);
  const [pagenum, setPagenum] = useState(1);
  const [pagesize, setPagesize] = useState(10);
  useEffect(() => {
    ListData();
  }, [pagenum, pagesize]);
  const ListData = async () => {
    const res = await axios.get("/users", {
      params: {
        pagenum: pagenum,
        pagesize: pagesize,
      },
    });
    console.log(res);
    setData(res.data.data.users);
    setTotalpage(res.data.data.total);
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "电话号码",
      dataIndex: "mobile",
      key: "mobile",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => handEdit(record)}>
            编辑
          </Button>
          <Button type="primary" danger onClick={() => handDetle(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const onChange = (pagenum, pagesize) => {
    console.log(pagenum, pagesize);
    setPagenum(pagenum);
    setPagesize(pagesize);
  };
  //实现模态框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();
  const [title, setTitle] = useState("");
  const showModal = () => {
    //打开对话框
    setIsModalOpen(true);
    setTitle("新增");
    //清除回显
    form.resetFields();
  };
  const handleOk = () => {
    //关闭弹框
    setIsModalOpen(false);
    //提交新增表单
    form.submit();
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //实现编辑效果
  //定义一个编辑按钮
  const [edit, setEdit] = useState("");
  //定义一个编辑函数
  const handEdit = (values) => {
    // //打开对话框
    setIsModalOpen(true);
    setTitle("编辑");
    //回显
    form.setFieldsValue(values);
    setEdit(values.id);
  };
  const onFinish = async (values) => {
    console.log("Success:", values);
    if (title === "新增") {
      await axios.post("/users", values).then((res) => {
        message.success("新增成功");
        ListData();
      });
    } else {
      axios.put(`/users/${edit}`, values).then((res) => {
        message.success("编辑成功");
        ListData();
      });
    }
  };
  //删除
  const handDetle = async (id) => {
    const res = await axios.delete(`/users/${id}`, {
      params: {
        id,
      },
    });
    Modal.confirm({
      title: "温馨提示?",
      content: "确定要删除吗？",
      onOk() {
        console.log("OK");
        message.success("删除成功");
        ListData();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  //查询
  const handleSearch = async (id) => {
    await axios.get(`/users/${id}`, {
      params: {
        id,
      },
    });
  };
  return (
    <div>
      <Form
        name="basic"
        layout="inline"
        style={{
          maxWidth: 3000,
        }}
        onFinish={handleSearch}
      >
        <Form.Item label="ID" name="id">
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <Button type="primary" onClick={showModal}>
        新增
      </Button>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          total: totalpage,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (totalpage) => `共 ${totalpage} 条`,
          onChange: onChange,
        }}
      />
      <Modal
        title={title}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          style={{
            maxWidth: 600,
          }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item label="用户名" name="username">
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input placeholder="请输入密码" />
          </Form.Item>
          <Form.Item label="手机号" name="mobile">
            <Input placeholder="请输入手机号" />
          </Form.Item>

          <Form.Item label="邮箱" name="email">
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default List;
